<template>
	<gui-page :fullPage="true">
		<template v-slot:gBody>
			<image src="@/static/login/lg_bg.jpg" style="position: fixed; top:0px;left:0px;width:100%;height: 100%;">
			</image>

			<view style="padding:50rpx;position: relative;">
				<view style="height: 200rpx;"></view>
				<view class="content" style="">
					<view class="content-item">

						<form @submit="submit">

							<view class="gui-flex gui-align-items-center">
								<input v-model="phoneNumber" type="number"
									class="gui-form-input gui-border gui-bg-white" name="phoneNumber"
									placeholder="请输入手机号" @blur="inputComplete(0)"
									style="height: 80rpx;border-radius: 40rpx;padding-left: 20rpx;width: 600rpx;" />
							</view>

							<view class="gui-flex gui-align-items-center">
								<input v-model="password" type="text" class="gui-form-input gui-border gui-bg-white"
									name="password" placeholder="请输入新密码" @blur="inputComplete(1)"
									style="height: 80rpx;border-radius: 40rpx;padding-left: 20rpx;width: 600rpx;" />
							</view>

							<view class="gui-flex gui-align-items-center">
								<input v-model="confirmPassword" type="text"
									class="gui-form-input gui-border gui-bg-white" name="confirmPassword"
									placeholder="再次输入新密码" @blur="inputComplete(2)"
									style="height: 80rpx;border-radius: 40rpx;padding-left: 20rpx;width: 600rpx;" />
							</view>

							<view class="gui-flex gui-align-items-center">
								<input v-model="smsCode" type="text" class="gui-form-input gui-border gui-bg-white"
									name="smsCode" placeholder="请输入短信验证码"
									style="height: 80rpx;border-radius: 40rpx;padding-left: 20rpx;width: 600rpx;" />
								<view style="position: absolute;right:80rpx;">
									<text class="gui-text-center gui-color-blue gui-bold" @click="setMsg"
										v-if="showPhone">发送验证码</text>
									<text class="gui-text-center gui-color-blue gui-bold" @click="setEmail"
										v-if="showPhone == false">{{PhoneCode}}秒后重新发送</text>
								</view>
							</view>

							<view style="margin-top:38rpx;justify-content: space-between;"
								class="gui-flex gui-align-items-center">

								<button type="primary" class="gui-border-radius-large" style="width: 300rpx;"
									@click="submit()">确定</button>
							</view>
						</form>

					</view>
				</view>
				<view class="gui-relative gui-color-white gui-flex gui-column gui-align-items-center">


				</view>
			</view>
		</template>
	</gui-page>
</template>
<script>
	import graceChecker from "@/Grace6/js/checker.js";
	import request from "@/Grace6/js/request.js";

	import sign from "@/Grace6/js/sign.js";
	import qs from 'qs'
	import string from '@/Grace6/js/string.js';
	// Password

	export default {
		data() {
			return {
				phoneNumber: "",
				smsCode: "",
				password: "",
				confirmPassword: "",
				phone: "",
				showPhone: true,
				PhoneCode: 60,
			}
		},
		onLoad(opt) {
			this.phone = opt.phone;
		},
		methods: {
			inputComplete(idx) {
				if (idx == 0) {
					let reg = /^1[3456789]\d{9}$/;
					if (reg.test(this.phoneNumber) == false) {
						uni.showToast({
							title: "该手机号无效，手机号由11位数字组成",
							icon: "none",
							duration: 4000
						})
						return;
					}
				} else if (idx == 1 && this.validatePassword(this.password) == false) {
					uni.showToast({
						title: "密码由8位以上大小写字母+数字组成",
						icon: "none",
						duration: 5000
					})
					return;
				} else if (idx == 2) {
					if (this.validatePassword(this.confirmPassword) == false) {
						uni.showToast({
							title: "密码由8位以上大小写字母+数字组成",
							icon: "none",
							duration: 5000
						})
						return;
					}
					if (this.password != this.confirmPassword) {
						uni.showToast({
							title: "两次输入的密码不一致",
							icon: "none",
							duration: 3000
						})
						return;
					}
				}
			},
			validatePassword(password) {
				const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
				console.log(regex.test(password));
				return regex.test(password);
			},
			submit() {
				if (this.phoneNumber == '') {
					uni.showToast({
						title: "您未输入手机号",
						icon: "none"
					})
					return;
				}
				if (this.validatePassword(this.password) == false) {
					uni.showToast({
						title: "密码由8位以上大小写字母+数字组成",
						icon: "none",
						duration: 5000
					})
					return;
				}
				if (this.validatePassword(this.confirmPassword) == false) {
					uni.showToast({
						title: "密码由8位以上大小写字母+数字组成",
						icon: "none",
						duration: 5000
					})
					return;
				}
				if (this.smsCode == '') {
					uni.showToast({
						title: "您未输入验证码",
						icon: "none"
					})
					return;
				}
				if (this.password != this.confirmPassword) {
					uni.showToast({
						title: "两次输入的密码不一致",
						icon: "none"
					})
					return;
				}
				uni.showToast({
					title: this.validatePassword(this.password)
				});
				let params = {
					phone: this.phoneNumber,
					code: this.smsCode,
					pass: this.password,
					pass2: this.confirmPassword,
					// pass: this.$lg.base64encode(this.password),
					// pass2: this.$lg.base64encode(this.confirmPassword),
				};
				// params["ttsxAuthSign"] = sign.sign(params).toString();
				console.log('传参：', params);
				this.$boya.NPost('/app/user/change_password', params, function(res) {
					console.log('res: ', res);
					if (res.code == "200") {
						uni.showToast({
							title: '修改成功',
							duration: 3000
						})
						setTimeout(function() {
							uni.reLaunch({
								url: "/pages/login/login"
							})
						}, 2000)
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000
						})
					}
				}, {
					token: false
				});
			},
			setMsg() {
				let formData = {
					phoneNumber: this.phoneNumber,
					smsType: 3
				}
				var rule = [{
					name: "phoneNumber",
					checkType: "phone",
					checkRule: "/^[1][3,4,5,7,8][0-9]{9}$/",
					errorMsg: "请输入正确的手机号"
				}, ];
				uni.showLoading({
					title: '加载中'
				});
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					let data = {
						phone: this.phoneNumber
					}
					let self = this;
					self.$boya.NPost('/app/sms_code', data, function(res) {
						console.log('验证码：', res);
						uni.hideLoading();
						if (res.code == 200) {
							self.showPhone = false
							let timer = setInterval(() => {
								self.PhoneCode--;
								if (self.PhoneCode < 1) {
									clearInterval(timer)
									self.PhoneCode = 0
									self.showPhone = true
									uni.showToast({
										title: "验证码已超过时效",
										icon: "none"
									})
								}
							}, 1000)
							console.log('res: ', res);
						} else {
							self.$boya.msg(res.msg)
						}
					}, null, {
						showError: false
					});

				} else {
					uni.showToast({
						title: "请输入正确的手机号!",
						icon: "none",
					})
				}
			},
		}
	}
</script>
<style scoped>
	.content {
		padding: 20rpx;
		color: gray;
		width: 103%;
		height: 800rpx;
	}

	.login-logo {
		width: 180rpx;
		height: 180rpx;
		font-size: 80rpx;
		text-align: center;
		line-height: 120rpx;
		padding: 30rpx;
		border-radius: 18rpx;
	}

	.other-login-icons {
		width: 88rpx;
		height: 88rpx;
		text-align: center;
		font-size: 70rpx;
		margin: 20rpx;
	}
</style>